<template>
    <div class="new-album w">
        <div class="dd" v-if="newAlbum != null">
            <div
            :key="index"
            v-for="(item, index) in newAlbum"
            class="dd-item">
                <div class="pic">
                    <div @click="playAlbum(item)" class="mask">
                        <i class="iconfont">&#xe682;</i>
                    </div>
                    <img :src="item.picUrl">
                </div>
                <div @click="jumpAlbumInfo(item.id)" class="item-b album-name">{{item.name}}</div>
                <div @click="jumpSinger(item.artists[0].id)" class="item-b author">{{item.artists[0].name}}</div>
                <div class="item-b timer">{{item.publishTime | timers}}</div>
            </div>
        </div>
    </div>    
</template>

<script>
export default {
    data() {
        return {
            // 新碟数据
            newAlbum: null
        }
    },
    mounted() {
        this.getNewAlbumData();
    },
    filters: {
        timers(t) {
            let time = new Date(t);
            return time.getFullYear() + '-' + (time.getMonth() + 1) +  '-' + time.getDate();
        }
    },
    methods: {
        // 获取新碟数据
        async getNewAlbumData() {
            let { data: res } = await this.$http.get('/top/album');
            this.newAlbum = res.albums;
        },
        // 播放新碟全部歌曲
        async playAlbum(item) {
            let { data: res } = await this.$http.get('/album', { params: { id: item.id } });
            this.$emit('playSongAll', res.songs);
            this.$router.push(`/album/info/${item.id}`);
        },
        // 跳转到歌手页面
        async jumpSinger(id) {
            this.$router.push(`/singer/info/${id}`);
        },
        // 跳转到专辑详情
        jumpAlbumInfo(id) {
            this.$router.push(`/album/info/${id}`);
        }
    }
}
</script>

<style lang="less" scoped>
.new-album {
    .dd {
        margin-top: 100px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .dd-item {
            width: 18%;
            margin-bottom: 30px;
            .pic {
                position: relative;
                width: 100%;
                height: 200px;
                cursor: pointer;
                &:hover .mask {
                    display: block;
                }
                .mask {
                    display: none;
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    background-color: rgba(0, 0, 0, .4);
                    &:hover .iconfont {
                        font-size: 50px;
                        opacity: 1;
                    }
                    .iconfont {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        font-size: 1px;
                        color: #fff;
                        font-weight: 700;
                        transition: all .4s;
                        opacity: 0;
                    }
                }
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .item-b {
                font-size: 14px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                margin-bottom: 4px;
            }
            .album-name {
                margin-top: 16px;
                cursor: pointer;
                &:hover {
                    color: #3ec481;
                }
            }
            .author {
                cursor: pointer;
                &:hover {
                    color: #3ec481;
                }
            }
            .author,
            .timer {
                color: #999;
            }
            .timer {
                letter-spacing: 2px;
            }
        }
    }
}
</style>